<template>
  <Scroll :on-reach-edge="loadData">
    <section v-for="item in list">
      <div class="city">
        <p>{{ item }}</p>
      </div>
    </section>
  </Scroll>
</template>
<script>
export default {
  data () {
    return {
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }
  },
  methods: {
    loadData (dir) {
      return new Promise(resolve => {
        setTimeout(() => {
          if (dir > 0) {
            const first = this.list[0]
            for (let i = 1; i < 11; i++) {
              this.list.unshift(first - i)
            }
          } else {
            const last = this.list[this.list.length - 1]
            for (let i = 1; i < 11; i++) {
              this.list.push(last + i)
            }
          }
          resolve()
        }, 500)
      })
    }
  }
}
</script>
<style>
    section {
        margin: 20px;
    }
    section > div {
        width: 300px;
        padding: 15px;
        margin: 5px;
        background-color: #ddf;
        border: 1px solid #446;
        border-radius: 5px;
        margin: 0 auto;
    }

    .ivu-scroll-container {
        height: 500px;
    }
</style>
